<template>
  <input type="text" v-model="text.current" />
  <div>
    {{ text.now }}
  </div>
</template>
<script setup lang="ts">
import { reactive, watch } from 'vue'
import gsap from 'gsap'

// 状态过渡：一般用于 input 输入框内的数字变化的状态过渡
// 调用 gsap.to 方法，第一个参数为目标对象，第二个参数为配置对象
// 可以在其中设置目标对象具体属性的新值和增加一些额外的配置属性

const text = reactive({
  current: 0,
  now: 0,
})
// 监听 text.current 值的变化，改变后将新值赋值给 text.now
watch(()=>text.current,(newVal,oldVal)=>{
  // text.now = newVal
  gsap.to(text,{
    now:newVal,
    duration:1
  })
})
</script>
<style scoped></style>
